<template>
	<gzPageWrapper ref="gzPageWrapperRef"
		:nav="{ title: '直冲卡详情',leftIcon:'left'}"
		:up="{ use: false, auto: false, page: { num: 1, size: 10 }, textNoMore: '--暂无更多--', empty: { use: false } }"
		:down="{ auto: false, auto: false }"
		>
		<template #default>
			<view class="container">
				<view class="top">
					<view class="topImg" v-if="vdata.detailType !='look'">
						<image v-if="vdata.detailInfo.goodsImgListBig?.substring(0, 2) === '//'" :src="vdata.detailInfo.goodsImgListBig.split('url=')[1]" mode="aspectFill"></image>
						<image v-else :src="vdata.detailInfo.goodsImgListBig" mode="aspectFill"></image>
					</view>
					<!-- 查看的详情 -->
					<view class="topImg" v-else>
						<image :src="vdata.detailInfo.imgUrl" mode="aspectFill"></image>
					</view>
					
					<view class="textDes">
						<view v-if="vdata.detailType !='look'" class="title">{{vdata.detailInfo.goodsName}}</view>
						<!-- 查看的详情 -->
						<view v-else class="title">{{vdata.detailInfo.name}}</view>
						
						<view class="score">
							<view class="text">消耗福分：</view>
							<view class="num">{{vdata.detailInfo.scoreNeed}}</view>
						</view>
						<view class="line"></view>
						<view class="time" v-if="vdata.detailType =='look'">
							<view class="icon">
								<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/61588575-5bd3-42e9-99ee-6cee9419e681.png" mode="aspectFill"></image>
							</view>
							<view class="date">
								有效期至{{vdata.detailInfo.eTime}}
							</view>
						</view>
					</view>
				</view>
				
				
				<view class="useRule" v-if="vdata.detailType !='look'">
					<view class="bigTitle">
						<view class="text">使用规则</view>
						<view class="bg"></view>
					</view>
					<view class="ruleContent">
						 {{ vdata.detailInfo?.goodsDetail }}
					</view>
					<view class="line">
						
					</view>
				</view>
				<!-- 查看的详情 -->
				<view class="useRule" v-else>
					<view class="bigTitle">
						<view class="text">使用规则</view>
						<view class="bg"></view>
					</view>
					<view class="ruleContent">
						 {{ vdata.detailInfo?.remark }}
					</view>
					<view class="line">
						
					</view>
				</view>
				<view class="btnCon">
					
					<view class="btn" v-if="vdata.detailInfo.state ==0 &&vdata.detailType !='look'" @click="directCard">
						立即兑换
					</view>
					
				</view>
			</view>
		</template>
		</gzPageWrapper>
		<uni-popup ref="popup" type="center" :mask-click="true" border-radius="10px 10px 0 0">
			<view class="dialog">
				<view class="title">直冲卡券</view>
				<view class="con">
					<view class="phoneName">
						充值账户
					</view>
					<view class="phone">
						<input type="tel" maxlength="11" placeholder="请输入手机号" v-model="vdata.account" />
						<button v-if="vdata.btnState" @click="getVirtualCode" plain :disabled="vcConfig.disabled" :style="{ color: vcConfig.color }">{{ vcConfig.text }}</button>
						<button v-else style="color: #C5C5C5;">{{ vcConfig.text }}</button>
					</view>
					<view class="codeName">
						验证码
					</view>
					<view class="code">
						<input type="number" placeholder="请输入验证码" v-model="vdata.code" />
					</view>
					<!-- <view class="member">
						<view class="title"><text>充值账户：</text></view>
						<view class="rightInput">
							<input type="tel" maxlength="11" placeholder="请输入手机号" v-model="vdata.account" />
							<button v-if="vdata.btnState" @click="getVirtualCode" plain :disabled="vcConfig.disabled" :style="{ color: vcConfig.color }">{{ vcConfig.text }}</button>
							<button v-else style="color: #C5C5C5;">{{ vcConfig.text }}</button>
						</view>
					</view>
					<view class="line"></view>
					<view class="code">
							<view class="title"><text>验证码：</text></view>
							<input type="number" placeholder="请输入验证码" v-model="vdata.code" />
					</view> -->
				</view>
				
				<view class="btn">
					<view class="cancel" @click="cancel">取消</view>
					<view class="confirm" @click="confirm">确认</view>
				</view>
				<view class="close" @click="close">
					<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b81785e4-6323-4934-9dec-9403c6815dea.png" mode="aspectFill"></image>
				</view>
			</view>
		</uni-popup>
	
</template>

<script setup>
	import {reactive, ref,getCurrentInstance} from 'vue'
	import { onShow, onLoad, onPageScroll, onHide } from '@dcloudio/uni-app';
	import { $virtualCreateOrder,$virtualSendMsg,$couponList } from '@/http/apiManager.js';
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	// const account = ref('')
	// 验证码相关配置
	const vcConfig = reactive({
		timer: null,	// 定时器
		text: '获取验证码',
		color: '#24c789',
		disabled: false,
	})
	
	
	/**
	 * 获取验证码 重置
	 */
	function originCode(){
		if(vcConfig.timer){
			clearInterval(vcConfig.timer)
		}
		vcConfig.text = '获取验证码'
		vcConfig.color = '#24c789'
		vcConfig.disabled = false
	}
	
	
	const popup = ref()
	const vdata = reactive({
		detailInfo:{},
		account:'',
		code:'',
		btnState: true,
		detailType:''
	})
	// 立即兑换
	const directCard = () =>{
		vdata.account = ''
		vdata.code = ''
		clearInterval(vcConfig.timer)
		vcConfig.disabled = false
		vcConfig.text = '获取验证码'
		vcConfig.color = '#24c789'
		popup.value.open()
		
		
	}
	
	// 获取验证码
	const phoneReg = /^(?:(?:\+|00)86)?1\d{10}$/
	const getVirtualCode = () =>{
		// 校验用户手机号
		if(!phoneReg.test(vdata.account)){
			$infoBox.toast('请输入正确的手机号')
			return
		}
		// 发送验证码
		vcConfig.disabled = true
		vcConfig.text = '发送中...'
		vcConfig.color = '#999'
		
		$virtualSendMsg({phone:vdata.account,flag:7
		}).then(res=>{
			console.log(res,'发送验证码')
			vcConfig.text = "重新获取(60)"
			let holdTime = 59; //定义变量并赋值
			vcConfig.timer = setInterval(() => {
				if (holdTime <= 0) {
					originCode()
					return; //返回前面
				}
				vcConfig.text = "重新获取(" + holdTime + ")"
				holdTime--;
			}, 1000)
		}).catch(()=>{
			originCode()
		})
	}
	
	onLoad(({detailData,detailType})=>{
		console.log(JSON.parse(decodeURIComponent(detailData)),detailType,'直充详情数据')
		// console.log(detailData,'直充详情数据')
		// console.log(JSON.parse(JSON.stringify(detailData)),'直充详情数据')
		vdata.detailType = detailType
		vdata.detailInfo = JSON.parse(decodeURIComponent(detailData))
	})
	
	
	// 点击关闭按钮
	const close = () =>{
		clearInterval(vcConfig.timer)
		vcConfig.text = '获取验证码'
		popup.value.close()
		
	}
	
	// 点击取消按钮
	const cancel = () =>{
		clearInterval(vcConfig.timer)
		vcConfig.text = '获取验证码'
		popup.value.close()
	}
	// 点击确认按钮
	const confirm = () =>{
		if(vdata.account&&vdata.code){
			$virtualCreateOrder({
				fansAwardId:vdata.detailInfo.fansAwardId,
				attach:vdata.account,
				code:vdata.code
			}).then(res=>{
				console.log(res,'兑换后信息')
				uni.showToast({
					title: '兑换成功',
					icon: 'none',
					duration: 1000
				})
				uni.$emit('UPDATE_LIST_DIRECT')
				// $couponList({})
				vcConfig.text = '获取验证码'
				clearInterval(vcConfig.timer)
				popup.value.close()
			})
		}else{
			if(!vdata.account){
				uni.showToast({
					title: '充值账户不能为空',
					icon: 'none',
					duration: 1000
				})
			}
			if(!vdata.code){
				uni.showToast({
					title: '验证码不能为空',
					icon: 'none',
					duration: 1000
				})
			}
			  
			// popup.value.close()
		}
	}
</script>
<style lang="less" scoped>
	.dialog{
		padding: 42rpx 40rpx 60rpx 40rpx;
		box-sizing: border-box;
		position: relative;
		width: 622rpx;
		height: 582rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		.line{
			width: 100%;
			height:1rpx;
			background-color: #EFEFEF;
			
		}
		.close{
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			top: 24rpx;
			right: 42rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.title{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			line-height: 32rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		.con{
			.phoneName{
				height: 88rpx;
				line-height: 88rpx;
			}
			.phone{
				display: flex;
				align-items: center;
				height: 88rpx;
				background: #F6F6F6;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				padding: 24rpx 20rpx;
				padding-right: 0 ;
				box-sizing: border-box;
				
				button{
					width: 300rpx;
					height: 80rpx;
					border: none;
					font-size: 30rpx;
					background-color: none;
				}
			}
			.codeName{
				height: 88rpx;
				line-height: 88rpx;
			}
			.code{
				height: 88rpx;
				background: #F6F6F6;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				padding: 24rpx 20rpx;
				box-sizing: border-box;
			}
			
			.member{
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				width: 100%;
				// height: 80rpx;
				margin-top: 20rpx;
				
				
				.title{
					width: 100%;
					text-align: left;
				}
				.rightInput{
					display: flex;
					align-items: center;
					button{
						width: 300rpx;
						height: 80rpx;
						border: none;
						font-size: 30rpx;
						background-color: none;
					}
				}
			}
			.code{
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				.title{
					width: 200rpx;
					text-align: left;
				}
			}
			
		}
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 60rpx;
			.cancel{
				width: 144rpx;
				height: 64rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx solid #24C789;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #24C789;
				line-height: 64rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin-right: 60rpx;
			}
			.confirm{
				width: 144rpx;
				height: 64rpx;
				background: #24C789;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}
	.container{
		width: 100%;
		height:100%;
		// min-height: 100vh;
		background-color: #F7F8FB;
		.top{
			// width: 100%;
			// height: 100%;
			background-color: #fff;
			.topImg{
				width: 750rpx;
				height: 750rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.textDes{
				width: 750rpx;
				height: 240rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
				.title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-top: 34rpx;
				}
				.score{
					display: flex;
					align-items: center;
					margin-top: 40rpx;
					.text{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #FF8833;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.num{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 50rpx;
						color: #FF8833;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
				.line{
					width: 686rpx;
					height: 0rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					border: 2rpx solid #EFEFEF;
					margin-top: 28rpx;
				}
				.time{
					display: flex;
					align-items: center;
					width: 100%;
					// height: 28rpx;
					
					margin-top: 30rpx;
					.icon{
						width: 36rpx;
						height: 36rpx;

						image{
							width: 100%;
							height: 100%;
						}
					}
					.date{
						margin-left: 10rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #999999;
						// line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
			}
			
		}
		
		
		.useRule{
			// width: 100%;
			// height: 100%;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 40rpx 32rpx;
			box-sizing: border-box;
			.bigTitle{
				position: relative;
				margin-bottom: 40rpx;
				.text{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 40rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					
				}
				.bg{
					position: absolute;
					bottom: -14rpx;
					left: 0;
					width: 160rpx;
					height: 10rpx;
					background: #24C789;
					border-radius: 5rpx 5rpx 5rpx 5rpx;
				}
				
			}
			
		}
		.btnCon{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 750rpx;
			height: 176rpx;
			
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(193,191,191,0.5);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			.btn{
				width: 686rpx;
				height: 88rpx;
				background: #FF8833;
				border-radius: 43rpx 43rpx 43rpx 43rpx;
				text-align: center;
				line-height: 88rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}
	
</style>